<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            .goodWarmp{
                width: 500px;
                display: flex;
                justify-content:left;
                border: 1px dashed black;
            }
            .goodWarmp img{
                width: 80px;
            }
            .goodWarmp>div:last-child{
                text-align: left;
            }
            .detail{
                width: 200px;
                height: 200px;
                background-color: #cccccc;
                position: fixed;
                right: 10px;
                top: 100px;
                border: 2px solid black;
            }
        </style>
</head>
<body>
    <div id="box">
       <film-item 
            v-for="good,index in list" 
            :good="good" 
            :key="good.id"
            @sendinfo="getInfo"
        ></film-item>
        <detail :detailinfo="detailInfo"></detail>
    </div>
    <script>
        // http://p0.meituan.net/w.h/movie/af1f6c6cf39d57f49e039980b8249d3a544445.jpg
        Vue.component("filmItem",{
            template:`
                <div class="goodWarmp">
                    <div>
                        <img :src="good.img.split('/w.h').join('')"/>
                    </div>
                    <div>
                        <h2>{{good.nm}}</h2>
                        <p>
                            电影评分：<span>{{good.sc}}</span>
                        </p>
                        <p>
                            主要演员：<span>{{good.star}}</span>
                        </p>
                        <p>
                            <button @click="getDetail">详情</button>
                        </p>
                    </div>
                </div>
            `,
            props:["good"],
            methods:{
                getDetail(){
                    this.$emit("sendinfo",this.good.showInfo)
                }
            }
            
        })
        
        Vue.component("detail",{
            template:`
                <div class="detail">{{detailinfo ? detailinfo : "点击显示详情信息"}}</div>
            `,
            props:["detailinfo"]
        })
        const vm = new Vue({
            el:"#box",
            data:{
                list:[],
                detailInfo:""
            },
            methods:{
                getList(){
                    axios("data.json").then(rs => {
                        // console.log(rs.data);
                        this.list = rs.data
                    })
                },
                getInfo(info){
                    this.detailInfo = info
                }
            },
            mounted(){
                this.getList()
            }
        })
    </script>
</body>
</html>